<template>
  <div class="page">
    <div class="flex align-center">
      <div class="page-brand">播放量统计</div>
    </div>
    <div class="g-card flex-b align-center" style="height: 160px;">
      <div
        v-for="item in videoValueList"
        :key="item.name"
        class="value-box flex-c flex-v align-center br"
      >
        <div class="flex align-center">
          <img :src="item.icon" alt="" class="icon">
          <div class="name">{{ item.name }}</div>
        </div>
        <div class="value">{{ item.value }}</div>
        <div :class="[item.ratio > 0 ? 'red' : 'green']">
          {{ item.ratio > 0 ? "+" : "-" }}{{ item.ratio }}
        </div>
      </div>
    </div>
    <div class="page-brand mt">发布明细</div>
    <div class="g-card rel">
      <div class="flex-b align-center">
        <div class="flex align-center">
          <div class="prefix-form-item">
            <div class="prefix-label">发布账号</div>
            <el-select
              v-model="queryForm.accountId"
              placeholder="请选择发布账号"
            >
              <el-option
                v-for="item in accountList"
                :key="item.id"
                :label="item.accountName"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="prefix-form-item">
            <div class="prefix-label">发布平台</div>
            <el-select
              v-model="queryForm.platform"
              placeholder="请选择发布平台"
            >
              <el-option
                v-for="item in platformList"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="prefix-form-item">
            <div class="prefix-label">任务名称</div>
            <el-input v-model="queryForm.taskName" placeholder="请输入任务名称" />
          </div>
        </div>
        <div class="flex-e align-center" style="margin-left: 30px;">
          <el-button type="danger" @click="batchDel">删除任务</el-button>

          <export-btn :list="tableData" name="发布明细列表" />
        </div>
      </div>
      <div class="video-list">
        <div v-for="item in tableData" :key="item.id" class="item flex align-center" @click="current=item">
          <img :src="item.cover" alt="" class="img">
          <div class="f1">
            <div class="name">
              {{ item.taskName }}
            </div>
            <div class="flex align-center" style="margin-top: 8px">
              <div
                class="tag flex-c align-center border-blue"
                style="margin-top: 0"
              >
                <img
                  src="@/assets/images/auth/douyin.png"
                  alt=""
                  class="icon"
                >
                {{ item.platform }}{{ accountMap[item.accountType] }}
              </div>
              <div class="circle-box flex align-center">
                <div class="circle bg-green" />
                <div class="color-green">{{ statusMap[item.status] }}</div>
              </div>
            </div>
            <div class="lg-name" style="margin-top: 10px">
              发布账号：{{ item.accountName }}
            </div>
            <div class="sub" style="margin-top: 12px">
              <div>创建时间：{{ item.createTime }}</div>
              <div>更新时间：{{ item.updateTime }}</div>
              <div>发布时间：{{ item.publishTime }}</div>
            </div>
            <div class="flex-b align-center" style="margin-top: 20px">
              <div class="flex align-center">
                <div class="icon-box flex align-center">
                  <img
                    src="@/assets/images/auth/icon1.png"
                    alt=""
                    class="icon"
                  >
                  {{ item.playCount||0 }}
                </div>
                <div class="icon-box flex align-center">
                  <img
                    src="@/assets/images/auth/icon2.png"
                    alt=""
                    class="icon"
                  >
                  {{ item.likeCount||0 }}
                </div>
                <div class="icon-box flex align-center">
                  <img
                    src="@/assets/images/auth/icon3.png"
                    alt=""
                    class="icon"
                  >
                  {{ item.commentCount||0 }}
                </div>
                <div class="icon-box flex align-center">
                  <img
                    src="@/assets/images/auth/icon4.png"
                    alt=""
                    class="icon"
                  >
                  {{ item.favoriteCount||0 }}
                </div>
                <div class="icon-box flex align-center">
                  <img
                    src="@/assets/images/auth/icon5.png"
                    alt=""
                    class="icon"
                  >
                  {{ item.shareCount||0 }}
                </div>
              </div>
              <div class="flex-e align-center">
                <el-button class="transparent" style="width: 80px;margin-right: 20px;border: 0.5px solid rgba(0, 0, 0, 1);">更新</el-button>
                <el-button type="primary" style="width: 80px;">查看视频</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pagination-box">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageParam.pageSize"
          :total="pageParam.total"
          hide-on-single-page
          @current-change="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getRecordList, delRecord } from '@/api/publish'
import { getList as getAccountList } from '@/api/auth'

export default {
  name: 'MarketPublish',
  data() {
    return {
      current: {},
      queryForm: {
        platform: '',
        accountId: '',
        taskName: ''
      },
      accountMap: {
        'person': '个人号',
        'team': '企业号',
        'employee': '员工号'
      },
      statusMap: {
        '0': '发布成功',
        '1': '发布失败',
        '2': '未发布'
      },
      platformList: [
        {
          name: '抖音',
          value: 'douyin'
        },
        {
          name: '快手',
          value: 'kuaishou'
        },
        {
          name: '视频号',
          value: 'shipinhao'
        },
        {
          name: '小红书',
          value: 'xiaohongshu'
        },
        {
          name: '哔哩哔哩',
          value: 'bilibili'
        },
        {
          name: '淘宝',
          value: 'taobao'
        }
      ],
      groupList: [],
      accountList: [],
      title: '小红书',
      isVideoPage: false,
      videoValueList: [
        {
          name: '累计播放量',
          value: '95426812',
          ratio: 256,
          icon: require('@/assets/images/market/icon1.png')
        },
        {
          name: '累计点赞量',
          value: '68128',
          ratio: 36,
          icon: require('@/assets/images/market/icon2.png')
        },
        {
          name: '累计评论量',
          value: '218',
          ratio: 35,
          icon: require('@/assets/images/market/icon3.png')
        },
        {
          name: '累计转发量',
          value: '68128',
          ratio: 56,
          icon: require('@/assets/images/market/icon4.png')
        },
        {
          name: '累计收藏量',
          value: '38128',
          ratio: 36,
          icon: require('@/assets/images/market/icon5.png')
        }
      ],
      pageParam: {
        total: 0,
        pageNo: 1,
        pageSize: 10
      },
      tableData: []
    }
  },
  async created() {
    await this.getAccountList()
    this.getList()
  },
  methods: {
    async batchDel() {
      if (!this.current.id) {
        this.$message.warning('请选择数据')
        return
      }
      const res = await delRecord({
        id: this.current.id.toString()
      })
      if (res.success) {
        this.$message.success('删除成功')
        this.getList()
      } else {
        this.$message.error(res.message)
      }
    },
    async getAccountList() {
      const res = await getAccountList()
      if (res.success) {
        this.accountList = (res.result.records || []).map(item => {
          item.id = item.id.toString()
          return item
        })
      } else {
        this.$message.error(res.message)
      }
    },
    async getList(pageNo = 1) {
      this.pageParam.pageNo = pageNo
      const res = await getRecordList({
        pageNo: this.pageParam.pageNo,
        pageSize: this.pageParam.pageSize,
        ...this.queryForm
      })
      if (res.success) {
        this.tableData = res.result.records.map((item, index) => {
          item.Number = (index + 1).toString()
          return item
        })
        this.pageParam.total = res.result.total
      } else {
        this.$message.error(res.message)
      }
    },
    handleShow(refName, title) {
      if (refName && this.$refs[refName]) {
        this.title = title
        this.$refs[refName].open()
      }
    },
    openGroup() {
      this.$refs.groupModal.open()
    }
  }
}
</script>
<style lang="scss" scoped>
.video-list {
  .item {
    box-sizing: border-box;
    background: rgba(0, 119, 255, 0.1);
    padding: 20px;
    margin-top: 20px;
    border-radius: 15px;

    border: 1px solid rgba(255, 255, 255, 1);
    .img {
      width: 195px;
      height: 260px;
      margin-right: 48px;
    }
    .name {
      font-size: 14px;
      color: rgba(0, 0, 0, 1);
    }
    .lg-name {
      font-size: 20px;
      color: rgba(0, 0, 0, 1);
    }
    .circle-box {
      margin-left: 30px;
      font-size: 14px;
    }
    .circle {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-right: 6px;
    }
    .sub {
      font-size: 14px;
      font-weight: 400;
      color: rgba(128, 128, 128, 1);
      line-height: 16.94px;

    }
    .icon-box {
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      margin-right: 22px;
      cursor: pointer;
      .icon {
        width: 18px;
        height: 18px;
        margin-right: 10px;
      }
    }
  }
}
.red {
  font-size: 20px;
  font-weight: 500;
  color: rgba(249, 58, 11, 1);
  margin-top: 24px;
}
.green {
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 255, 102, 1);
  margin-top: 24px;
}
.br {
  border-right: 1px solid rgba(238, 238, 238, 0.2);
  &:last-child {
    border-right: 0;
  }
}
.value-box {
  position: relative;
  flex: 1;
  &::after{
    position: absolute;
    width: 1px;
    height: 70px;
    content: "";
    background: rgba(229, 229, 229, 1);
    border-radius: 15px;
    right: 0;
  }
  .icon {
    width: 25px;
    height: 25px;
    margin-right: 5px;
  }
  .name {
    font-size: 20px;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
  }
  .value {
    font-size: 40px;
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    margin-top: 14px;
  }
}
.tag {
  height: 30px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(0, 119, 255, 1);
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 119, 255, 1);
  padding: 0 9px;
  margin-top: 16px;
  .icon {
    width: 19px;
    height: 19px;
    margin-right: 8px;
  }
}
.account-list {
  .item {
    box-sizing: border-box;
    padding: 33px 46px;
    background: rgba(0, 119, 255, 0.1);
    display: grid;
    grid-template-columns: 30% 1fr;
    margin-top: 30px;

    .tight {
      margin-top: 24px;
    }
    .icon-btn {
      margin-top: 24px;
      box-sizing: border-box;
      padding: 0 10px;
      height: 40px;
      border-radius: 5px;
      background: rgba(0, 119, 255, 1);
      margin-right: 26px;
      cursor: pointer;
      .icon {
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
      font-size: 14px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }
    .name {
      font-size: 14px;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);
    }
    .sub {
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      margin-top: 14px;
    }

    .avatar-box {
      position: relative;
      margin-right: 26px;
      .avatar {
        width: 80px;
        height: 80px;
        border-radius: 50%;
      }
      .badge {
        font-size: 14px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        box-sizing: border-box;
        padding: 2px 10px;
        border-radius: 15px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
      }
    }
  }
}
.page-sub {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  margin-left: 17px;
  position: relative;
  top: -2px;
}
.page-sub.link {
  color: rgba(0, 119, 255, 1);
}
.mt {
  margin-top: 30px;
}
.prefix-form-item {
  width: 230px;
  margin-right: 50px;
  &:last-child {
    margin-right: 0;
  }
}
.brand-list {
  .item {
    cursor: pointer;
    .icon {
      width: 100px;
      height: 100px;
      margin-bottom: 10px;
    }
    .name {
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
    }
  }
}
.dark {
  .value-box .value,
  .name,
  .video-list .item .name,
  .video-list .item .icon-box {
    color: rgba(255, 255, 255, 0.7);
  }
  .br {
    border-right: 0;
  }
}
</style>
